<template>
  <div>
      
	  <MyHeader1 title="购物车"></MyHeader1>
	

	<div class="total_count">全部商品<em>{{t_num}}</em>件</div>	
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
	<ul class="cart_list_td clearfix" v-for="(item,index) in data_list" :key="item.id">
		<li class="col01"><input type="checkbox" name="" checked v-model="check_list[index]"></li>
		<li class="col02"><img :src="'http://127.0.0.1:8000'+item.goods.pic"></li>
		<li class="col03">{{item.goods.name}}<br><em>{{item.goods.price}}元/{{item.goods.unit}}</em></li>
		<li class="col04">{{item.goods.unit}}</li>
		<li class="col05">{{item.goods.price}}元</li>
		<li class="col06">
			<div class="num_add">
				<a href="javascript:;" class="add fl" @click="item.num=item.num+1">+</a>
				<input type="text" class="num_show fl" value="1" v-model="item.num">	
				<a href="javascript:;" class="minus fl" @click="item.num=item.num-1">-</a>	
			</div>
		</li>
		<li class="col07">{{(item.num*item.goods.price).toFixed(2)}}元</li>
		<li class="col08"><a href="javascript:;" @click="del(item.id)">删除</a></li>
	</ul>

	
	

	<ul class="settlements">
		<li class="col01"><input type="checkbox" name="" v-model="all_select"></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em>{{select_money.toFixed(2)}}</em><br>共计<b>{{select_num}}</b>件商品</li>
		<li class="col04"><router-link to="/placeorder">去结算</router-link></li>
	</ul>

	<MyCertification></MyCertification>
  </div>
</template>

<script>
import MyCertification from './common/Certification'
import MyBaseHeader from './common/BaseHeader'
import MyHeader1 from './common/Header1'
export default {
    components:{
		MyCertification,
		MyBaseHeader,
		MyHeader1
    },
    data(){
        return{
            username:sessionStorage.getItem('username'),
			data_list:[],
			check_list:[]
        }
    },
    methods:{
        btn(){
            this.$router.push('/search')
        },
        logout(){
			//因为我们前端目前状态保持在前端，放到sessionStorage中，因此退出登录就是删除
			const sure=confirm('确定要注销账号吗?')   // confirm是 JavaScript 原生提供的 一个 确认对话框
			if(sure){
				sessionStorage.clear()  //清空状态缓存
				this.$router.go(0)     //主动刷新页面
			}
		},
		del(id){
			const token=sessionStorage.getItem('token')
			if(!token){
				alert('未登录，不能进行删除操作')
			}
			this.axios.delete('/cart',{'params':{'gid':id,'token':token}}).then(resp=>{
				console.log(resp.data)
					alert(resp.data.msg)
					this.$router.go(0)
			}).catch(error=>{
				console.log(error)
			})
		}
    },
    computed:{
        t_num(){
            let count=0
            for(let i=0;i<this.data_list.length;i++){
                count=count+this.data_list[i].num
            }
            return count
        },
        select_num(){
          let count=0
            for(let i=0;i<this.data_list.length;i++){
				if(this.check_list[i]){
					count=count+this.data_list[i].num
				}
                
            }
            return count  
        },
        select_money(){
            let money=0
            for (let i=0;i<this.data_list.length;i++){
				if(this.check_list[i]){
					 money=money+this.data_list[i].num*this.data_list[i].goods.price
				}
               
            }
            return money
		},
		all_select:{
			get(){
				for(let i=0;i<this.data_list.length;i++){
					if(!this.check_list[i]){
						return false
					}
				}
				return true
			},
			set(value){
				for (let i=0;i<this.data_list.length;i++){
					this.$set(this.check_list,i,value)
				}
			}
		}


    },
    created(){
        const token=sessionStorage.getItem('token')
        if(!token){
            alert('没登陆，不能查看购物车详情信息，请先登录')
			this.$router.push('/login')
            return
        }
        this.axios.get('/cart?token='+token).then(resp=>{        // 获取这个用户下的所有购物记录
            console.log(resp.data)
            this.data_list=resp.data.data
            // alert(resp.data.msg)
			//我们给每一个购物记录 添加一个复选框数据
			for(let i=0;i<this.data_list.length;i++){
				this.check_list[i]=true
			}
			console.log(this.data_list)
			console.log(this.check_list)
        }).catch(error=>{
            console.log(error)
        })
    },
}
</script>
<style>
</style>